<template>
  <div class="container">

    <!-- 公告部分 -->
    <el-card class="announcement" shadow="always" v-if="announcements.length">
      <h1>{{ announcements[currentAnnouncementIndex].noticeTitle }}</h1>
      <p v-html="announcements[currentAnnouncementIndex].noticeContent"></p>
    </el-card>

    <div class="message-container">
      <!-- 留言列表... -->
      <el-card class="messages-list" shadow="always">
        <div class="message" v-for="msg in messages" :key="msg.id">
          <div class="message-info">
            <div class="info">
              <!-- 动态绑定头像地址 -->
              <img :src="msg.avatar ? 'dev-api/' + msg.avatar : require('@/assets/images/profile.jpg')" alt="头像" class="avatar">
              <strong>{{ msg.username }}</strong>
            </div>
            <span>发布于: {{ msg.createTime }}</span>
          </div>
          <div class="content">
            {{ msg.content }}
          </div>
        </div>
      </el-card>

      <!-- 留言表单... -->
      <el-card class="message-input" shadow="always">
        <h1>留言板</h1>
        <el-form class="form">
          <el-form-item label="留言内容">
            <el-input type="textarea" v-model="message" placeholder="请输入留言内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitMessage">留言</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  </div>
  </div>
</template>


<script>
import {listNoticeByUser} from "@/api/system/notice";
import {addMessage, listMessages} from "@/api/message/message";

export default {
  data() {
    return {
      username: '',
      message: '',
      messages: [],
      // 新增公告信息对象
      announcements: [], // 存储所有公告
      currentAnnouncementIndex: 0 // 当前显示的公告索引
    };
  },
  created() {
    this.fetchAnnouncements();
    this.startAnnouncementRotation();
    this.fetchMessages();
  },
  methods: {
    fetchAnnouncements() {
      listNoticeByUser().then(response => {
        // 直接检查response中是否有rows属性
        if (response && response.rows) {
          this.announcements = response.rows;
        } else {
          console.error('系统异常', response);
        }
      }).catch(error => {
        console.error('获取公告失败', error);
      });
    },

    startAnnouncementRotation() {
      setInterval(() => {
        // 更新当前公告索引，循环显示所有公告
        this.currentAnnouncementIndex = (this.currentAnnouncementIndex + 1) % this.announcements.length;
      }, 10000); // 每10秒切换一次
    },
    fetchMessages() {
      listMessages().then(response => {
        if (response && response.rows) {
          this.messages = response.rows;
        } else {
          console.error('系统异常', response);
        }
      }).catch(error => {
        console.error('获取留言失败', error);
      });
    },

    submitMessage() {
      if (this.message === '') {
        alert('请输入内容');
        return;
      }
      const messageData = {
        content: this.message
      };
      // 发送新留言到后端
      addMessage(messageData).then(response => {
        // 处理响应
        console.log('留言成功', response);
        // 重新获取留言列表
        this.fetchMessages();
        // 清空输入框
        this.message = '';
      }).catch(error => {
        console.error('留言失败', error);
      });
    }

  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column; /* 更改为垂直方向 */
  margin: 20px;
  background-color: #f7f8fa;
  padding: 20px;
  height: 87vh; /* 新增：设置高度为视口高度 */
}

.message-container {
  display: flex;
  justify-content: space-between;
  flex: 1; /* 新增：分配多余的空间 */
}

.messages-list, .message-input {
  flex: 1;
  margin: 0 10px;
  max-height: calc(82vh - 200px);
  overflow-y: auto;
  background-color: white;
  padding: 20px;
}

.message {
  margin-bottom: 10px;
  border-bottom: 1px solid #eaecef; /* 细横线样式 */
  padding-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.message-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info strong {
  font-size: 16px;
  color: #333;
}

.info span {
  font-size: 14px;
  color: #999;
}

.content {
  font-size: 14px;
  line-height: 1.5;
}

/* 添加公告部分的样式 */
.announcement {
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  height: 200px; /* 设置最大高度 */
  overflow-y: auto;  /* 超出部分显示滚动条 */
}

.announcement h1 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.announcement p {
  font-size: 14px;
  line-height: 1.5;
}
</style>
